<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .container{
            width: 590px;
            height: 470px;
            border:1px solid black;
            margin:20px auto;
            position: relative;
        }
        .item{
            width: 590px;
            height: 470px;
            background: url('../img/01.jpg');
            position: absolute;
            /* display */
            opacity:0;
            transition: all 1s;
        }
        /* first second third fourth fifth sixth numberth */
        .item:nth-child(2){
            background: url('../img/02.jpg');
        }
        .item:nth-child(3){
            background: url('../img/03.jpg');
        }
        .item:nth-child(4){
            background: url('../img/04.jpg');
        }
        .item:nth-child(5){
            background: url('../img/05.jpg');
        }
        .show{
            opacity: 1;
        }
        .btn-box{
            position:absolute;
            width:100%;
            top:0;
            bottom:0;
            margin:auto 0 ;
            height:50px;
            /* background-color: white; */
        }
        .left-btn,.right-btn{
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            color:#fff;
            text-align: center;
            line-height: 50px;
            font-size: 26px;
            cursor: pointer;
        }
        .right-btn{
            right:0;
        }

        .ctrl-box{
            position:absolute;
            width: 50%;
            height: 20px;
            background: rgba(0,0,0,0.5);
            bottom:10px;
            left:0;
            right:0;
            margin:0 auto;
            display:flex;
            justify-content: space-around;
            
        }
        .ctrl{
            width: 20px;
            height: 20px;
            border:2px solid #fff;
            border-radius: 50%;
        }
        .active{
            background:#fff;
        }
    </style>
    <script>
        function $(ele){ 
            return document.querySelector(ele) 
        }
        function ready(){
            let items=document.getElementsByClassName('item');
            let ctrls=document.getElementsByClassName('ctrl');
            let time=null;
            let index=0;
            function animation(ope){
                for(let i=0;i<items.length;i++){
                    items[i].className='item';
                    ctrls[i].className='ctrl';
                }
                if( ope=='jia'){
                    if(index>=4){
                    index=0;
                    }else{
                        index++;
                    }
                }else if(ope=='jian'){
                    if(index<=0){
                    index=4;
                    }else{
                        index--;
                    }

                }
                
                items[index].className='item show';
                ctrls[index].className='ctrl active';

                
            }
            time=setInterval(function(){
                animation('jia');
            },2000);
            $('.container').onmouseenter=function(){
                clearInterval(time);
            }
            $('.container').onmouseleave=function(){
                time=setInterval(function(){
                    animation('jia');
                },2000);
            }
            $('.left-btn').onclick=function(){
                animation('jian');
            }
            $('.right-btn').onclick=function(){
                animation('jia');
            }
            // for(let i=0;i<ctrls.length;i++){
            //     ctrls[i].onclick=function(){
            //         for(let k=0;k<items.length;k++){
            //             items[k].className='item';
            //             ctrls[k].className='ctrl';
            //         }
            //         index=i;
            //         items[index].className='item show';
            //         ctrls[index].className='ctrl active';

            //     }
            // }

            for(let i=0;i<ctrls.length;i++){
                ctrls[i].index=i;
                $('.ctrl-box').addEventListener('click',function(e){
                    items[e.target.index].className='item';
                    for(let k=0;k<ctrls.length;k++){
                            items[k].className='item';
                            ctrls[k].className='ctrl';
                    }
                    index =e.target.index;
                    items[index].className='item show';
                        e.target.className='ctrl active';
                    

                    },false)



            }
           
            
        }
        document.addEventListener('DOMContentLoaded',ready);
    </script>
</head>
<body>
    <div class="container">
        <div class="item show"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="btn-box">
            <div class="left-btn">&lt;</div>
            <div class="right-btn">&gt;</div>
        </div>
        <div class="ctrl-box">
            <div class="ctrl active"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
            <div class="ctrl"></div>
        </div>
    </div>
   
</body>
</html>